<template>
  <h2>充值管理</h2>
  <div class="flexbox1">
    <div class="flexbox2">
      <div>充值总人数：{{ data.countData.allpeopel }}</div>
      <div>今日充值人数：{{ data.countData.todayman }}</div>
      <div>7天充值人数：{{ data.countData.sevendayman }}</div>
      <div>30天充值人数：{{ data.countData.dayman }}</div>
      <div>充值总金额：{{ data.countData.allmoney }}</div>
      <div>今日充值金额：{{ data.countData.todaymoney }}</div>
      <div>7天充值金额：{{ data.countData.sevenmoney }}</div>
      <div>30天充值金额：{{ data.countData.daymoney }}</div>
    </div>
    <div class="right"><button class="btn" @click="allocation">充值价格配置</button></div>
  </div>

  <El-row>
    <El-col :span="6">
      <div class="grid-content bg-purple"> 充值时间：
        <El-date-picker v-model="date1" type="date" placeholder="起始时间" style="width:30%" />到
        <El-date-picker v-model="date2" type="date" placeholder="结束时间" style="width: 30%" />
      </div>
    </El-col>
    <El-col :span="15">
      <div class="grid-content bg-purple-light">
        充值手机号：
        <el-input v-model="phones" style="width:30%" placeholder="Please input" />
        订单号：
        <el-input v-model="numbers" style="width:30%" placeholder="Please input" />

        状态： <el-select v-model="value" class="m-2" placeholder="Select" style="width:10%">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </El-col>
    <El-col :span="3">
      <div class="grid-content bg-purple rightbtn"><button class="btn2" @click="search">查询</button></div>
    </El-col>
  </El-row>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="充值时间" width="180" />
    <el-table-column prop="name" label="充值类型" width="180" />
    <el-table-column prop="address" label="实际支付" />
    <el-table-column prop="orderPhones" label="充值手机号" />
    <el-table-column prop="orderNumbers" label="订单号" />
    <el-table-column prop="orderState" label="状态" />
  </el-table>

  <div class="demo-pagination-block fenye">
  
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      :background=true
      layout="total,slot,sizes, prev, pager, next"
      :total="50"
      prev-text="上一页"
      next-text="下一页"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    <span class="frist">每页展示</span>
    
    </el-pagination>
  </div>
</template>

<script setup>

import { reactive, ref } from 'vue'
const value = ref('')
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    orderPhones: 123456,
    orderNumbers: 65844468432,
    orderState: "已支付"
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    orderPhones: 123456,
    orderNumbers: 65844468432,
    orderState: "已支付"
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    orderPhones: 123456,
    orderNumbers: 65844468432,
    orderState: "已支付"
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    orderPhones: 123456,
    orderNumbers: 65844468432,
    orderState: "已支付"
  },
]
const options = [
  {
    value: 'Option1',
    label: '成功',
  },
  {
    value: 'Option2',
    label: '失败',
  },

]
const phones = ref("")
const numbers = ref("")
const date1 = ref("")
const date2 = ref("")
const currentPage4 = ref(10)
const pageSize4 = ref(100)
const data = reactive({
  countData: {
    allpeopel: 555, todayman: 55, sevendayman: 222, dayman: 231, allmoney: 55550,
    todaymoney: 550, sevenmoney: 2220, daymoney: 2310
  }
})
function allocation() {
  console.log(date1.value, date2.value, phones.value, numbers.value);

}
function search() {
  console.log(date1.value, date2.value, phones.value, numbers.value);

}
</script>


<style scoped>
/* *{outline: 1px solid red;} */
button {
  cursor: pointer;
}

.flexbox1 {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bolder;
}

.flexbox2 {
  display: flex;
  flex-wrap: wrap;
  width: 60rem;
}

.flexbox2 div {
  width: 15rem;
  margin: 10px 0;
}

.flexbox1 .btn {
  width: 12rem;
  height: 3.3rem;
  background-color: rgb(22, 155, 213);
  color: white;
}

.btn2 {
  width: 8rem;
  height: 2.2rem;
  color: white;
  background-color: rgb(85, 85, 85);
}

.flexbox1 .right {
  margin: auto 0;
}

.el-row {
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  margin-bottom: 20px;
  background-color: rgb(215, 215, 215);
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 0.25rem;
  min-height: 2.25rem;
}

.rightbtn {
  float: right;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.fenye{margin: 0 auto;width: 40rem;}

</style>